/*
 * 路由封装主页
 */
// ————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
// 数据引入区
import React from 'react'
import { Routes, Route, Navigate, BrowserRouter } from 'react-router-dom'
import { routes, IRoute } from './routes' // 引入路由配置信息表

// 封装一层 专门负责显示页面标题
// ————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
const DomTitle = (props) => {
  const { item } = props
  document.title = item.title

  return item.element
}

// 路由渲染函数
// ————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
const routeData = (routerList: Array<IRoute>) => {
  const token = localStorage.getItem('token') // 获取token

  // 循环替换为route组件
  return routerList.map((item, index) => {
    const { path, noAuth, children, redirect, caseSensitive } = item // 参数结构

    // 判断是否是需要登陆，并且此时还没有token值 则将其重定向到登陆界面
    // ------------------------------------------------------------------------------------------------
    if (!noAuth && !token)
      return <Route path="*" key={index} element={<Navigate to="/login" />} />

    // 若是不需要的登陆 或者 已经有了token则进行常规路由展示
    // ------------------------------------------------------------------------------------------------
    return (
      <Route
        caseSensitive={caseSensitive}
        key={path}
        path={path}
        // 判断此路由是否需要重定向，需要则跳转至此需要的地址,并且动态改变对应的titile，否则则是常规的路由
        element={
          redirect ? <Navigate to={redirect} /> : <DomTitle item={item} />
        }
      >
        {/* 嵌套内部路由的展示 */}
        {/* ------------------------------------------------------------------------------------------------ */}
        {!!children &&
          children.map((i) => {
            return (
              <Route
                caseSensitive={i.caseSensitive}
                key={i.path}
                path={i.path}
                index={i.index}
                // 判断此路由是否需要重定向，需要则跳转至此需要的地址，否则则是常规的路由
                element={
                  i.redirect ? (
                    <Navigate to={i.redirect} />
                  ) : (
                    <DomTitle item={i} />
                  )
                }
              />
            )
          })}
      </Route>
    )
  })
}

// 路由集成组件
// ————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
const AppRouter = () => {
  return (
    // fallback后可以更少加载时的动画组件，此模板只是展示一段文字
    <React.Suspense fallback={<>正在加载……</>}>
      <BrowserRouter>
        <Routes>
          {routeData(routes)}
          {/* 404页面 */}
          {/* <Route path="/login" element={<InputText />} /> */}
        </Routes>
      </BrowserRouter>
    </React.Suspense>
  )
}

// 导出封装好的路由
// ————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
export default AppRouter
